<template>
  <div class="summary-table-section">
    <h2 class="section-title">测试数据汇总表</h2>
    <div class="table-container">
      <table class="summary-table">
        <thead>
          <tr>
            <th>测试类型</th>
            <th>总案例数</th>
            <th>已执行</th>
            <th>通过数</th>
            <th>失败数</th>
            <th>通过率</th>
            <th>覆盖率</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id" class="table-row">
            <td class="test-type">
              <div class="type-cell">
                <div class="type-icon" :class="item.type">
                  <i :class="item.icon"></i>
                </div>
                <span>{{ item.name }}</span>
              </div>
            </td>
            <td class="number-cell">{{ item.totalCases }}</td>
            <td class="number-cell">{{ item.executed }}</td>
            <td class="number-cell success">{{ item.passed }}</td>
            <td class="number-cell error">{{ item.failed }}</td>
            <td class="rate-cell">
              <div class="rate-container">
                <span class="rate-value" :class="getRateClass(item.passRate)">{{ item.passRate }}%</span>
                <div class="rate-bar">
                  <div class="rate-fill" :style="{ width: item.passRate + '%', backgroundColor: getRateColor(item.passRate) }"></div>
                </div>
              </div>
            </td>
            <td class="rate-cell">
              <div class="rate-container">
                <span class="rate-value" :class="getCoverageClass(item.coverage)">{{ item.coverage }}%</span>
                <div class="rate-bar">
                  <div class="rate-fill" :style="{ width: item.coverage + '%', backgroundColor: getCoverageColor(item.coverage) }"></div>
                </div>
              </div>
            </td>
            <td class="status-cell">
              <span class="status-badge" :class="item.status">{{ getStatusText(item.status) }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SummaryTable',
  setup() {
    const tableData = [
      {
        id: 'ui-automation',
        name: 'UI自动化案例',
        type: 'ui-automation',
        icon: 'fas fa-desktop',
        totalCases: 156,
        executed: 142,
        passed: 128,
        failed: 14,
        passRate: 90,
        coverage: 85,
        status: 'active'
      },
      {
        id: 'api-automation',
        name: '接口自动化案例',
        type: 'api-automation',
        icon: 'fas fa-plug',
        totalCases: 89,
        executed: 78,
        passed: 71,
        failed: 7,
        passRate: 91,
        coverage: 72,
        status: 'active'
      },
      {
        id: 'ai-generated',
        name: 'AI生成测试案例',
        type: 'ai-generated',
        icon: 'fas fa-robot',
        totalCases: 234,
        executed: 198,
        passed: 176,
        failed: 22,
        passRate: 89,
        coverage: 78,
        status: 'active'
      },
      {
        id: 'performance',
        name: '性能测试案例',
        type: 'performance',
        icon: 'fas fa-tachometer-alt',
        totalCases: 45,
        executed: 38,
        passed: 31,
        failed: 7,
        passRate: 82,
        coverage: 65,
        status: 'warning'
      },
      {
        id: 'security',
        name: '安全测试案例',
        type: 'security',
        icon: 'fas fa-shield-alt',
        totalCases: 67,
        executed: 52,
        passed: 44,
        failed: 8,
        passRate: 85,
        coverage: 58,
        status: 'warning'
      }
    ]

    const getRateClass = (rate) => {
      if (rate >= 90) return 'excellent'
      if (rate >= 80) return 'good'
      if (rate >= 70) return 'fair'
      return 'poor'
    }

    const getCoverageClass = (coverage) => {
      if (coverage >= 80) return 'excellent'
      if (coverage >= 70) return 'good'
      if (coverage >= 60) return 'fair'
      return 'poor'
    }

    const getRateColor = (rate) => {
      if (rate >= 90) return '#10b981'
      if (rate >= 80) return '#3b82f6'
      if (rate >= 70) return '#f59e0b'
      return '#ef4444'
    }

    const getCoverageColor = (coverage) => {
      if (coverage >= 80) return '#10b981'
      if (coverage >= 70) return '#3b82f6'
      if (coverage >= 60) return '#f59e0b'
      return '#ef4444'
    }

    const getStatusText = (status) => {
      const statusMap = {
        active: '正常',
        warning: '注意',
        error: '异常'
      }
      return statusMap[status] || '未知'
    }

    return {
      tableData,
      getRateClass,
      getCoverageClass,
      getRateColor,
      getCoverageColor,
      getStatusText
    }
  }
}
</script>

<style scoped>
.summary-table-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 20px;
}

.table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
}

.summary-table thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.summary-table th {
  padding: 16px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.summary-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
}

.summary-table tbody tr:hover {
  background-color: #f9fafb;
}

.summary-table td {
  padding: 16px 12px;
  vertical-align: middle;
}

.test-type {
  min-width: 180px;
}

.type-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.type-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

.type-icon.ui-automation {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.type-icon.api-automation {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.type-icon.ai-generated {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.type-icon.performance {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.type-icon.security {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.number-cell {
  font-weight: 600;
  font-size: 16px;
  color: #374151;
  text-align: center;
}

.number-cell.success {
  color: #10b981;
}

.number-cell.error {
  color: #ef4444;
}

.rate-cell {
  min-width: 120px;
}

.rate-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.rate-value {
  font-weight: 600;
  font-size: 14px;
}

.rate-value.excellent {
  color: #10b981;
}

.rate-value.good {
  color: #3b82f6;
}

.rate-value.fair {
  color: #f59e0b;
}

.rate-value.poor {
  color: #ef4444;
}

.rate-bar {
  width: 80px;
  height: 6px;
  background-color: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.rate-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.status-cell {
  text-align: center;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.active {
  background-color: #d1fae5;
  color: #065f46;
}

.status-badge.warning {
  background-color: #fef3c7;
  color: #92400e;
}

.status-badge.error {
  background-color: #fecaca;
  color: #991b1b;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .summary-table th,
  .summary-table td {
    padding: 12px 8px;
    font-size: 13px;
  }
  
  .type-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .rate-bar {
    width: 60px;
  }
}
</style>